<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>{{article.title}}</title>
  <meta name="description" content="{{article.title}}" />
  <meta name="keywords" content="{{article.keywords}}" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://biyapay.io/favicon.ico">
  {{!-- 引入tailwind --}}
  <script src="/js/tailwindcss.js"></script>
  {{!-- 引入element样式 --}}
  <link rel="stylesheet" href="/style/element-ui@2.15.14.css">
  {{!-- 引入markdown样式 --}}
  <link rel="stylesheet" href="/style/markdown.css">
  {{!-- 引入复制功能 --}}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
</head>
<style>
  .el-collapse-item__header,
  .el-collapse-item__wrap {
    background-color: #000;
    color: #fff;
  }
</style>

<body>
  {{> header }}
  <div class="main px-[100px] py-5">
    <div
      class="wrap relative w-full m-auto px-5 py-24 pb-15 flex flex-col justify-start items-start lg:px-20 xl:px-0 xl:w-2/3 2xl:w-1/2">
      <div aria-label="Breadcrumb" role="navigation" class="el-breadcrumb mt-5 py-4 lg:py-8">
        <span class="el-breadcrumb__item text-base">
          <span role="link" class="el-breadcrumb__inner is-link">
            {{t article.routerName}}
          </span>
          <i class="el-breadcrumb__separator el-icon-arrow-right"></i>
        </span>
        <span class="el-breadcrumb__item text-base">
          <span role="link" class="el-breadcrumb__inner is-link">
            {{article.type_p_name}}
          </span>
          <i class="el-breadcrumb__separator el-icon-arrow-right"></i>
        </span>
        <span class="el-breadcrumb__item text-base" aria-current="page">
          <span role="link" class="el-breadcrumb__inner">
            {{article.title}}
          </span>
          <i class="el-breadcrumb__separator el-icon-arrow-right"></i></span>
      </div>
      <h1 class="w-full text-primary-default font-bold text-4xl mb-3">{{article.title}}</h1>
      <div class="w-full my-10 flex flex-col justify-start items-start lg:flex-row lg:justify-between">
        <div class="my-10 flex justify-center items-center lg:my-0"><img
            src="https://public.hxdsmy.com/static/MTcxMDA1MDUzMTUwMzgyNjA1Mg==_1710051519809.png" alt=""
            class="w-8 mr-4 md:w-10">
          <div>
            <div class="text-base font-normal text-primary-default">BiyaPay</div>
            <div class="text-[#1c222d80] text-opacity-50 text-xs">{{t 'releaseTime'}} {{article.publishTime}}</div>
          </div>
        </div>
        <div id="options" class="flex justify-start items-center">
          <img src="https://public.hxdsmy.com/static/MTcxMDA1MDUzMTUwMzgyNjA1Mg==_1710051506818.png" alt=""
            class="w-6 mx-2 cursor-pointer">

          <img src="https://public.hxdsmy.com/static/MTcxMDA1MDUzMTUwMzgyNjA1Mg==_1710051532137.png" alt=""
            class="w-6 mx-2 cursor-pointer">

          <img src="https://public.hxdsmy.com/static/MTcxMDA1MDUzMTUwMzgyNjA1Mg==_1710051539981.png" alt=""
            class="w-6 mx-2 cursor-pointer">

          <img src="https://public.hxdsmy.com/static/MTcxMDA1MDUzMTUwMzgyNjA1Mg==_1710051547433.png" alt=""
            class="w-6 mx-2 cursor-pointer">

          <img src="https://public.hxdsmy.com/static/MTcxMDA1MDUzMTUwMzgyNjA1Mg==_1710051555384.png" alt=""
            id="articleUrl" data-clipboard-action="copy" data-clipboard-target="#articleUrl"
            class="w-6 mx-2 cursor-pointer">
        </div>
      </div>
      <div class="w-full h-[1px] bg-[#dcdfe6] mb-6"></div>
      <div class="article-detail">{{{article.content}}}</div>
      {{#if article.recommendedList.length}}
      <div
        class="article_list w-[200px] cursor-pointer absolute -right-[42%] top-[50%] -translate-y-[50%] xl:hidden 2xl:block">
        <ul>
          <li class="text-xl font-semibold pb-2 hover:text-[#0ea5e9]">
            <a href="/articleList/1">{{t 'articleList'}}</a>
          </li>
          {{#each article.recommendedList}}
          <li class="pb-2 hover:text-[#0ea5e9]"><a href="/article/{{this.id}}">{{this.title}}</a></li>
          {{/each}}
        </ul>
      </div>
      {{/if}}
    </div>
  </div>
  {{> footer }}
  <script>
    const imgs = document.querySelectorAll('#options > img');

    imgs[0].addEventListener('click', () => {
      window.open("https://weibo.com/");
    })

    imgs[1].addEventListener('click', () => {
      window.location.href = "weixin://";
    })

    imgs[2].addEventListener('click', () => {
      window.open("https://discord.com/app");
    })

    imgs[3].addEventListener('click', () => {
      window.open("https://twitter.com/home");
    })

    new ClipboardJS('#articleUrl', {
      text: function () {
        return window.location.href;
      }
    });

    // 确保在DOM加载完成后执行
    document.addEventListener('DOMContentLoaded', function () {
      // 初始化ClipboardJS
      const clipboard = new ClipboardJS('#articleUrl');

      // 监听复制成功事件
      clipboard.on('success', function (e) {
        console.log('复制成功');
        e.clearSelection();
      });

      // 监听复制失败事件
      clipboard.on('error', function (e) {
        console.error('复制失败');
      });
    });

    const bc = new BroadcastChannel('my-channel');
    bc.onmessage = function (event) {
      if (event.data.action === 'languageChanged') {
        // 刷新页面或更新语言设置
        setTimeout(async () => {
          await location.reload();
        }, 60)
      }
    };
  </script>
</body>

</html>